<header class="page-header">
  <div class="level">
    <div class="level-left">
      <h1 class="title is-3">
        Secrets Engines
      </h1>
    </div>
    <div class="level-right">
      {{#link-to 'vault.cluster.settings.mount-secret-backend' class="button has-icon-right is-ghost is-compact"}}
        Enable new engine
        {{i-con glyph="chevron-right" size=11}}
      {{/link-to}}
    </div>
  </div>
</header>

{{#each supportedBackends as |backend|}}
  {{#linked-block
    "vault.cluster.secrets.backend.list-root"
    backend.id
    class="box is-sideless is-marginless has-pointer"
    data-test-secret-backend-row=backend.id
  }}
    <div class="level is-mobile">
      <div class="level-left">
        <div>
          <a data-test-secret-path
             href={{href-to 'vault.cluster.secrets.backend.list-root' backend.id}}
             class="has-text-black has-text-weight-semibold"
             >{{i-con glyph="folder" size=14 class="has-text-grey-light"}}{{backend.path}}</a>
          <br />
          <span class="tag">
            {{#if (eq backend.type 'plugin')}}
              {{backend.type}}: {{backend.config.plugin_name}}
            {{else}}
              {{backend.type}}
            {{/if}}
          </span>
          <code class="has-text-grey is-size-8">
          {{#if (eq backend.options.version 2)}}
            v2
          {{/if}}
          </code>
          <code class="has-text-grey is-size-8">
            {{backend.accessor}}
          </code>
        </div>
      </div>
      <div class="level-right is-flex is-paddingless is-marginless">
        <div class="level-item">
          {{#popup-menu name="engine-menu"}}
             <nav class="menu">
               <ul class="menu-list">
                 <li class="action">
                   <a href="{{href-to 'vault.cluster.secrets.backend.configuration' backend.id}}">
                     View Configuration
                   </a>
                  </li>
                 {{#if item.updatePath.isPending}}
                   <li class="action">
                     <button disabled=true type="button" class="link button is-loading is-transparent"></button>
                    </li>
                 {{/if}}
              </ul>
            </nav>
          {{/popup-menu}}
        </div>
      </div>
    </div>
  {{/linked-block}}
{{/each}}
{{#each unsupportedBackends as |backend|}}
  <div class="box is-sideless is-marginless"
       data-test-secret-backend-row={{backend.id}}
    >
    <div class="level is-mobile">
      <div class="level-left">
        <div>
          <div data-test-secret-path class="has-text-weight-semibold">
            {{i-con glyph="folder" size=14 class="has-text-grey-light"}} {{backend.path}}
          </div>
          <span class="tag">
            <code>
              {{#if (eq backend.type 'plugin')}}
                {{backend.type}}: {{backend.config.plugin_name}}
              {{else}}
                {{backend.type}}
              {{/if}}
            </code>
          </span>
          <code class="has-text-grey is-size-8">
            {{backend.accessor}}
          </code>
        </div>
      </div>
      <div class="level-right is-flex is-paddingless is-marginless">
        <div class="level-item">
          {{#popup-menu name="engine-menu"}}
             <nav class="menu">
               <ul class="menu-list">
                 <li class="action">
                   <a href="{{href-to 'vault.cluster.secrets.backend.configuration' backend.id}}" data-test-engine-config>
                     View Configuration
                   </a>
                 </li>
               </ul>
            </nav>
          {{/popup-menu}}
        </div>
      </div>
    </div>
  </div>
{{/each}}
